<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 文本 -->
    hello
    <!-- div => 标签/元素  -->
    <!-- class => 属性 -->
    <div class="box"></div>
</body>
<script>
    // DOM  => Document Obejct Model => 操作文档的接口和方法 (1. 获取元素  2.操作元素-> 改变内容, 属性,样式 ,绑定事件  3. 元素的增 删 替换)


    // DOM     (html xhtml)
    // 核心DOM
    // HTML DOM
    // XML  DOM


    // => HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素
    //  元素的增删改查

    // DOM节点:
    // 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
    // 整个文档是一个文档节点
    // 每个 HTML 元素是元素节点
    // HTML 元素内的文本是文本节点
    // 每个 HTML 属性是属性节点 (属性节点依存于元素节点)
    // 注释是注释节点

    // DOM树:
    
    // DOM树中的节点彼此拥有层级关系。
    // 父（parent）节点
    //     父节点拥有任意数量的子节点
    // 子（child）节点
    //     子节点拥有一个父节点
    // 同胞（sibling）节点
    //         同级的子节点被称为同胞（兄弟或姐妹）。同胞是拥有相同父节点的节点 
    // 根（root）节点
    //         在节点树中，顶端节点被称为根（root） 	根节点没有父节点

    // 所有的节点都是对象(引用类型)












</script>

</html>